<script setup>
import { inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import Card from '@/views/new-screen/components/card.vue'
import DrawEcharts from '@/components/draw-echarts.vue'
import yycg from '../../../../assets/imgs/bt_yycg_nor.png'
import sjfws from '../../../../assets/imgs/bt_sjfws_nor.png'
import fkzrs from '../../../../assets/imgs/bt_fkzrs_nor.png'
import jzmj from '../../../../assets/imgs/ic_jzmj.png'
import rzqys from '../../../../assets/imgs/ic_rzqys.png'
import fwzs from '../../../../assets/imgs/ic_fwzs.png'
import test1 from '../../../../assets/imgs/img1@2x.png'
import test2 from '../../../../assets/imgs/img2@2x.png'
import {
  getDangerTotal,
  getImportantTotal,
  getParkTotalById,
} from '@/api/screen/home/index.js'

let measure, _viewer, _layerManager

const mapId = inject('mapId')
const parkList = inject('parkList')

const props = defineProps({
  isExpanded: Boolean,
  activePark: String,
})

let houseList = ref([
  {
    label: '房屋总数',
    value: 267,
    img: fwzs,
    unit: '栋',
    key: 'houseTotal',
  },
  {
    label: '建筑面积',
    value: 31,
    img: jzmj,
    unit: 'km²',
    key: 'areaTotal',
  },
  {
    label: '入住企业数',
    value: 100,
    img: rzqys,
    unit: '家',
    key: 'companyTotal',
  },
  {
    label: '相关方数',
    value: 30,
    img: rzqys,
    unit: '家',
    key: 'relationTotal',
  },
])

const trendOptions = {
  backgroundColor: 'transparent',
  //你的代码
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(13, 64, 71, 0.50)',
    borderColor: 'rgba(143, 225, 252, 0.60)',
    padding: 8,
    textStyle: {
      color: '#fff',
    },
  },
  legend: {
    data: ['预约数', '入园人数', '入园车辆'],
    icon: 'rect',
    right: '3%',
    top: '5%',
    itemWidth: 12,
    itemHeight: 12,
    textStyle: {
      fontSize: 14,
      color: '#FFFFFF',
    },
  },
  grid: {
    left: '12%',
    right: '3%',
    bottom: '30',
    top: '17.5%',
  },
  xAxis: [
    {
      type: 'category',
      data: [
        '2.1',
        '2.2',
        '2.3',
        '2.4',
        '2.5',
        '2.6',
        '2.7',
        '2.8',
        '2.9',
        '2.10',
      ],
      boundaryGap: false,
      axisPointer: {
        type: 'shadow',
      },
      axisLabel: {
        color: '#F5F5F5', //更改坐标轴文字颜色
        fontSize: 12, //更改坐标轴文字大小
      },
    },
  ],
  yAxis: [
    {
      type: 'value',
      axisLabel: {
        color: '#F5F5F5', //更改坐标轴文字颜色
        fontSize: 12, //更改坐标轴文字大小
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(30, 48, 63, 1)',
          type: 'dashed',
        },
      },
    },

    // 折线部分
    {
      type: 'value',
      name: '',
      axisLabel: {
        show: false,
        color: '#F5F5F5', //更改坐标轴文字颜色
        fontSize: 12, //更改坐标轴文字大小
        formatter: '{value} %',
      },
      splitLine: {
        show: false,
      },
    },
  ],
  series: [
    {
      name: '预约数',
      type: 'line',
      showSymbol: false,
      itemStyle: {
        shadowColor: '#fff',
        shadowBlur: 5,
        color: '#50FEA3',
      },
      lineStyle: {
        width: 1,
        color: '#50FEA3',
      },
      areaStyle: {
        width: 4,
        // opacity: 0.1,
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(80,254,163, 1)' },
            { offset: 1, color: 'rgba(80,254,163, 0.1)' },
          ],
          global: false,
        },
      },
      // 实现数字展示在柱状图
      label: {
        show: false,
        position: 'top',
        fontSize: 12,
        color: '#F5F5F5',
        offset: [0, -10],
        formatter: '{c}', //添加单位
      },
      data: [180, 170, 110, 370, 37, 260, 420, 170, 110, 370],
    },
    {
      name: '入园人数',
      type: 'line',
      showSymbol: false,
      itemStyle: {
        shadowColor: '#fff',
        shadowBlur: 5,
        color: '#FF6059',
      },
      lineStyle: {
        width: 1,
        color: '#FF6059',
      },
      areaStyle: {
        width: 4,
        // opacity: 0.1,
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(255,96,89, 1)' },
            { offset: 1, color: 'rgba(255,96,89, 0.1)' },
          ],
          global: false,
        },
      },
      label: {
        show: false,
        position: 'top',
        fontSize: 12,
        color: '#F5F5F5',
        offset: [0, -10],
        formatter: '{c}', //添加单位
      },
      data: [490, 380, 200, 480, 480, 310, 370, 200, 480, 480],
    },

    // 折线部分
    {
      name: '入园车辆',
      type: 'line',
      // smooth: true,
      yAxisIndex: 1,
      // symbol: 'circle',
      // symbolSize: 10,
      showSymbol: false,
      itemStyle: {
        shadowColor: '#fff',
        shadowBlur: 5,
        color: '#FAB54F',
      },
      lineStyle: {
        width: 1,
        color: '#FAB54F',
      },
      areaStyle: {
        width: 4,
        // opacity: 0.1,
        // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //   {
        //     offset: 0,
        //     color: 'rgba(0, 0, 0, 0.6)'
        //   },
        //   {
        //     offset: 1,
        //     color: 'rgba(250,181,79,0.8)'
        //   }
        // ])
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 1, color: 'rgba(0,0,0, 1)' },
            { offset: 0, color: 'rgba(250,181,79, 1)' },
          ],
          global: false,
        },
      },
      label: {
        show: false,
        position: 'top',
        color: '#F5F5F5',
        formatter: '{c} %',
      },
      data: [29, 38, 52, 75, 98, 110, 120, 75, 98, 110],
    },
  ],
}

const visitorNumList = ref([
  {
    img: yycg,
    name: '预约成功数',
    value: 9,
  },
  {
    img: sjfws,
    name: '实际访问数',
    value: 9,
  },
  {
    img: fkzrs,
    name: '访客总人数',
    value: 9,
  },
])

const imgList = ref([
  {
    img: test1,
  },
  {
    img: test2,
  },
  {
    img: test1,
  },
  {
    img: test2,
  },
  {
    img: test1,
  },
])

const houseCurrent = ref(0)
const handleHouseChange = (val) => {
  if (houseCurrent.value === 0 && val === -1) {
    return
  }
  if (houseCurrent.value === imgList.value.length - 3 && val === 1) {
    return
  }
  houseCurrent.value += val
}

const sideSlopeCurrent = ref(0)
const handleSideSlopeChange = (val) => {
  if (sideSlopeCurrent.value === 0 && val === -1) {
    return
  }
  if (sideSlopeCurrent.value === imgList.value.length - 3 && val === 1) {
    return
  }
  sideSlopeCurrent.value += val
}

const parkInfo = ref({
  score: 0,
  parkArea: 0,
})

const getHouseListData = () => {
  if (!props.activePark) return
  getParkTotalById({
    parkId: props.activePark,
  }).then((res) => {
    if (res.success) {
      // console.log(res.data)
      const data = res.data || {}
      houseList.value = houseList.value.map((item) => {
        return {
          ...item,
          value: data[item.key] || 0,
        }
      })
      parkInfo.value = {
        score: data.score || 0,
        parkArea: data.parkArea || 0,
      }
    } else {
      ElMessage.error(res.message || '暂无数据')
    }
  })
}

const dangerAreaInfo = ref({
  dangercount: 0,
  totalcount: 0,
})

const getDangerAreaInfo = () => {
  if (!props.activePark) return
  getDangerTotal({
    parkId: props.activePark,
  }).then((res) => {
    if (res.success) {
      // console.log(res.data)
      dangerAreaInfo.value = res.data || {}
    } else {
      ElMessage.error(res.message || '暂无数据')
    }
  })
}

const importAreaInfo = ref({
  importantcount: 0,
  totalcount: 0,
})

const getImportantAreaInfo = () => {
  if (!props.activePark) return
  getImportantTotal({
    parkId: props.activePark,
  }).then((res) => {
    if (res.success) {
      // console.log(res.data)
      importAreaInfo.value = res.data || {}
    } else {
      ElMessage.error(res.message || '暂无数据')
    }
  })
}

watch(
  () => props.activePark,
  (val) => {
    if (val) {
      getHouseListData()
      getDangerAreaInfo()
      getImportantAreaInfo()
    }
  },
)

onMounted(async () => {
  getHouseListData()
  getDangerAreaInfo()
  getImportantAreaInfo()
  // console.log(props.activePark)
  // const { map, layerManager } = await getHelper(mapId)
  // _viewer = map
  // measure = new Cesium.Measure(map)
  // _layerManager = layerManager
  // mitter.on('trajectory', (val) => {
  //   trajectoryMap()
  // })
})
onBeforeUnmount(() => {
  // mitter.off('trajectory')
  // removeEntity()
})
</script>

<template>
  <div :class="['right', isExpanded ? 'active' : '']">
    <card name="园区资产" class="house-statistics">
      <template #title>
        <i class="title-icon"></i>
      </template>
      <div class="house-list">
        <div
          class="house-list-item"
          v-for="item in houseList"
          :key="item.label"
        >
          <img :src="item.img" />
          <div class="house-list-item-label">
            <span>{{ item.label }}</span>
          </div>
          <div class="house-list-item-value">
            <span>{{ item.value }}</span>
            <span>{{ item.unit }}</span>
          </div>
        </div>
      </div>
      <div class="area-info-title">
        <div class="area-info-title-info">
          <div class="area-info-title-info-left">
            <span>{{
              parkList?.find((item) => item.id === activePark)?.name || ''
            }}</span>
            <span class="value">{{ parkInfo.score }}</span>
            <span class="point">分</span>
          </div>
          <div class="area-info-title-info-right">
            <span>园区面积</span>
            <span class="value">{{ parkInfo.parkArea }}</span>
            <span class="point">km²</span>
          </div>
        </div>
      </div>
      <!--      <div class="in-out" style="margin-bottom: 20px">-->
      <!--        <div class="in-out-bottom">-->
      <!--          <div class="in-out-bottom-info">-->
      <!--            <div class="in-out-bottom-info-left">-->
      <!--              <span>当前正在作业相关方</span>-->
      <!--              &lt;!&ndash; <img src="../../../../assets/imgs/yczlcl.png" /> &ndash;&gt;-->
      <!--              <span></span>-->
      <!--            </div>-->
      <!--            <div class="in-out-bottom-info-right">-->
      <!--              <div class="in-out-bottom-info-right-num">0</div>-->
      <!--              <div class="in-out-bottom-info-right-num">0</div>-->
      <!--              <div class="in-out-bottom-info-right-num">1</div>-->
      <!--              <span>个</span>-->
      <!--            </div>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
    </card>
    <card
      name="访客统计"
      class="temporary-visitor"
      v-if="activePark === 'caijia'"
    >
      <template #title>
        <i class="title-icon"></i>
      </template>
      <div class="area-title">
        <div class="area-title-left" style="justify-content: flex-start">
          <div class="area-title-left-names">
            <div class="area-title-left-name">今日访客统计</div>
          </div>
        </div>
      </div>
      <div class="visitors">
        <div
          class="visitor"
          v-for="(item, index) in visitorNumList"
          :key="index"
          :style="{ backgroundImage: `url(${item.img})` }"
        >
          <div class="visitor-info">
            <div class="visitor-info-name">{{ item.name }}</div>
            <div class="visitor-info-value">
              <span>{{ item.value }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="in-out" style="margin-bottom: 20px">
        <div class="in-out-bottom">
          <div class="in-out-bottom-info">
            <div class="in-out-bottom-info-left">
              <img src="../../../../assets/imgs/yczlcl.png" />
              <span>（18:00以后）</span>
            </div>
            <div class="in-out-bottom-info-right">
              <div class="in-out-bottom-info-right-num">1</div>
              <div class="in-out-bottom-info-right-num">2</div>
              <div class="in-out-bottom-info-right-num">3</div>
              <span>辆</span>
            </div>
          </div>
        </div>
      </div>
      <div class="area-title">
        <div class="area-title-left" style="justify-content: flex-start">
          <div class="area-title-left-names">
            <div class="area-title-left-name">访问变化趋势(近10日)</div>
          </div>
        </div>
      </div>
      <div class="trend-chart">
        <draw-echarts
          width="400"
          height="270"
          :options="trendOptions"
        ></draw-echarts>
      </div>
    </card>
    <card name="危房及边坡统计" class="danger-house" v-else>
      <template #title>
        <i class="title-icon"></i>
      </template>
      <div class="area-title">
        <div class="area-title-left" style="justify-content: flex-start">
          <div class="area-title-left-names">
            <div class="area-title-left-name">危房统计</div>
          </div>
        </div>
      </div>
      <div class="statistics house">
        <div class="statistics-left">
          <div class="statistics-left-count">
            <span> {{ dangerAreaInfo.dangercount }} </span>栋
          </div>
          <div class="statistics-left-name">危房数量</div>
        </div>
        <div class="statistics-right">
          <div class="statistics-right-count">
            <span>{{
              dangerAreaInfo.totalcount
                ? (
                    (dangerAreaInfo.dangercount / dangerAreaInfo.totalcount) *
                    100
                  ).toFixed(2)
                : 0
            }}</span
            >%
          </div>
          <div class="statistics-right-name">占比</div>
        </div>
      </div>
      <div class="picture">
        <!--        <el-icon @click="handleHouseChange(-1)"><CaretLeft /></el-icon>-->
        <!--        <div class="picture-wrapper">-->
        <!--          <div-->
        <!--            class="picture-content"-->
        <!--            :style="{ left: `-${houseCurrent * 125}px` }"-->
        <!--          >-->
        <!--            <img-->
        <!--              v-for="(item, index) of imgList"-->
        <!--              :key="index"-->
        <!--              :src="item.img"-->
        <!--            />-->
        <!--          </div>-->
        <!--        </div>-->
        <!--        <el-icon @click="handleHouseChange(1)"><CaretRight /></el-icon>-->
      </div>
      <div class="area-title">
        <div class="area-title-left" style="justify-content: flex-start">
          <div class="area-title-left-names">
            <div class="area-title-left-name">重点区域统计</div>
          </div>
        </div>
      </div>
      <div class="statistics house">
        <div class="statistics-left">
          <div class="statistics-left-count">
            <span>{{ importAreaInfo.importantcount }}</span
            >栋
          </div>
          <div class="statistics-left-name">重点区域房屋数</div>
        </div>
        <div class="statistics-right">
          <div class="statistics-right-count">
            <span>
              {{
                importAreaInfo.totalcount
                  ? (
                      (importAreaInfo.importantcount /
                        importAreaInfo.totalcount) *
                      100
                    ).toFixed(2)
                  : 0
              }} </span
            >%
          </div>
          <div class="statistics-right-name">占比</div>
        </div>
      </div>
      <div class="picture">
        <!--        <el-icon @click="handleSideSlopeChange(-1)"><CaretLeft /></el-icon>-->
        <!--        <div class="picture-wrapper">-->
        <!--          <div-->
        <!--            class="picture-content"-->
        <!--            :style="{ left: `-${sideSlopeCurrent * 125}px` }"-->
        <!--          >-->
        <!--            <img-->
        <!--              v-for="(item, index) of imgList"-->
        <!--              :key="index"-->
        <!--              :src="item.img"-->
        <!--            />-->
        <!--          </div>-->
        <!--        </div>-->
        <!--        <el-icon @click="handleSideSlopeChange(1)"><CaretRight /></el-icon>-->
      </div>
    </card>
  </div>
</template>

<style scoped lang="scss">
.right {
  .title-icon {
    display: inline-flex;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 61px;
    position: relative;
    bottom: 20px;
    // margin-top: 10px;
  }

  .right-close {
    height: 100%;
    position: absolute;
    right: 0;

    img {
      height: 16px;
      width: 16px;
      cursor: pointer;
    }
  }

  .area-title {
    display: flex;
    height: 21px;
    position: relative;

    &-left {
      height: 100%;
      width: 50%;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-image: url('@/assets/imgs/tab_yq_d.png');
      margin-left: 10px;
      display: flex;
      justify-content: flex-start;
      padding-left: 20px;

      &-names {
        display: flex;
        justify-content: flex-start;
      }

      &-name {
        font-family: Source Han Sans SC;
        font-weight: bold;
        font-size: 16px;
        color: #00a6ff;
        background: linear-gradient(0deg, #8dc4ff 0%, #ffffff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        cursor: pointer;
      }

      .is-active {
        font-weight: bold;
        font-size: 16px;
        color: #ffffff;
        background: linear-gradient(259deg, #fff4c8 0%, #ffc152 98.9990234375%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  .house-statistics {
    height: 328px;
    margin-bottom: var(--card-margin-bottom);

    .title-icon {
      width: 122px;
      background-image: url('@/assets/imgs/yqzc_title.png');
    }

    .house-list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      &-item {
        width: 102px;
        display: flex;
        flex-direction: column;

        img {
          height: 99px;
        }

        &-label {
          font-family: Source Han Sans SC;
          font-weight: 400;
          font-size: 14px;
          color: #c4eaff;
          height: 30px;
          line-height: 30px;
          text-align: center;
        }

        &-value {
          font-family: Source Han Sans SC;
          font-weight: 400;
          font-size: 14px;
          color: #c4eaff;
          height: 30px;
          line-height: 30px;
          text-align: center;

          span:first-child {
            font-family: Source Han Sans SC;
            font-weight: bold;
            font-size: 24px;
            color: #f7fbff;
            line-height: 30px;
            background: linear-gradient(0deg, #8dc4ff 0%, #ffffff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
      }
    }

    .area-info-title {
      height: 75px;
      margin-top: 10px;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-image: url('@/assets/imgs/img_yqjj_d.png');
      padding-left: 83px;
      padding-right: 21px;
      margin-bottom: 10px;

      &-info {
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: Source Han Sans SC;
        color: #ffffff;
        padding-left: 10px;

        &-left {
          font-size: 14px;
          font-weight: 400;

          .value {
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 18px;
            color: #36d5f0;
            margin-left: 6px;
          }

          .point {
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 12px;
            color: #36d5f0;
          }
        }

        &-right {
          font-weight: 400;
          font-size: 14px;

          .value {
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 18px;
            color: #ffc152;
            margin-left: 6px;
          }

          .point {
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 12px;
            color: #ffc152;
          }
        }
      }
    }

    .in-out {
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 60px;
      background-image: url('@/assets/imgs/bg_cr.png');
      margin-top: 20px;
      margin-bottom: 20px;
      display: flex;
      flex-direction: column;

      &-bottom {
        flex: 1;
        display: flex;
        align-items: center;
        cursor: pointer;

        &-info {
          width: 100%;
          height: 40px;
          display: flex;
          justify-content: space-between;
          padding-left: 20px;
          padding-right: 20px;

          &-left {
            height: 100%;
            display: flex;
            align-items: center;

            img {
              height: 14px;
              width: 100px;
            }

            span {
              font-family: Source Han Sans SC;
              font-weight: 800;
              font-size: 16px;
              font-style: italic;
              // color: #c4eaff;
              line-height: 209px;
              background-image: linear-gradient(to bottom, #fff, #c4eaff);
              background-clip: text;
              -webkit-background-clip: text;
              color: transparent;
            }
          }

          &-right {
            height: 100%;
            display: flex;
            align-items: end;

            &-num {
              width: 30px;
              height: 37px;
              background-repeat: no-repeat;
              background-size: 100% 100%;
              background-image: url('@/assets/imgs/img_szd.png');
              font-family: DINPro;
              font-weight: 500;
              font-size: 23px;
              color: #fff3e1;
              text-align: center;
              line-height: 37px;
            }

            span {
              font-family: Source Han Sans SC;
              font-weight: 500;
              font-size: 12px;
              color: #c4eaff;
              margin-left: 4px;
            }
          }
        }
      }
    }

    .house {
      background-image: url('@/assets/imgs/img_wftj.png');
    }

    .area {
      background-image: url('@/assets/imgs/img_zdqy.png');
    }
  }

  .temporary-visitor {
    height: 558px;

    .title-icon {
      width: 138px;
      background-image: url('@/assets/imgs/fktj_title.png');
    }

    .visitors {
      display: flex;
      // height: 60px;
      align-items: center;
      justify-content: space-around;
      margin: 20px 0 10px 0;

      .visitor {
        width: 134px;
        height: 58px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: flex-end;
        cursor: pointer;

        &-info {
          width: 70%;
          height: 100%;
          font-weight: 400;
          font-size: 12px;
          color: #ffffff;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          &-name {
            line-height: 20px;
            height: 20px;
          }

          &-value {
            line-height: 30px;
            height: 30px;

            span {
              font-family: Source Han Sans SC;
              font-weight: bold;
              font-size: 20px;
              color: #36d5f0;
              margin-right: 4px;
            }
          }
        }
      }
    }

    .in-out {
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 60px;
      background-image: url('@/assets/imgs/bg_cr.png');
      margin-top: 20px;
      margin-bottom: 20px;
      display: flex;
      flex-direction: column;

      &-bottom {
        flex: 1;
        display: flex;
        align-items: center;
        cursor: pointer;

        &-info {
          width: 100%;
          height: 40px;
          display: flex;
          justify-content: space-between;
          padding-left: 20px;
          padding-right: 20px;

          &-left {
            height: 100%;
            display: flex;
            align-items: center;

            img {
              height: 14px;
              width: 100px;
            }

            span {
              font-family: Source Han Sans SC;
              font-weight: 400;
              font-size: 12px;
              color: #c4eaff;
              line-height: 209px;
            }
          }

          &-right {
            height: 100%;
            display: flex;
            align-items: end;

            &-num {
              width: 30px;
              height: 37px;
              background-repeat: no-repeat;
              background-size: 100% 100%;
              background-image: url('@/assets/imgs/img_szd.png');
              font-family: DINPro;
              font-weight: 500;
              font-size: 23px;
              color: #fff3e1;
              text-align: center;
              line-height: 37px;
            }

            span {
              font-family: Source Han Sans SC;
              font-weight: 500;
              font-size: 12px;
              color: #c4eaff;
              margin-left: 4px;
            }
          }
        }
      }
    }
  }

  .danger-house {
    height: 538px;

    .title-icon {
      width: 138px;
      background-image: url('@/assets/imgs/wfjbptj_title.png');
    }

    .statistics {
      margin-top: 60px;
      margin-bottom: 0px;
      height: 120px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: Source Han Sans SC;
      font-weight: 400;
      font-size: 13px;
      color: #c4eaff;

      &-left {
        width: 35%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        &-count {
          // margin-top: 4px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          font-size: 12px;
          color: #c4eaff;

          span {
            font-family: Source Han Sans SC;
            font-weight: bold;
            font-size: 24px;
            color: #ff6059;
          }
        }
      }

      &-right {
        width: 35%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        &-count {
          // margin-top: 4px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          font-size: 12px;
          color: #c4eaff;

          span {
            font-size: 24px;
          }
        }
      }
    }

    .house {
      background-image: url('@/assets/imgs/img_wftj.png');
    }

    .picture {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .el-icon {
        font-size: 20px;
        color: #00a6ff;
        cursor: pointer;
      }
      &-wrapper {
        width: 375px;
        height: 80px;
        overflow: hidden;
        position: relative;
      }
      &-content {
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        transition: all 1s linear;
        img {
          width: 115px;
          height: 80px;
          margin: 0 5px;
        }
      }
    }
  }
}
</style>
